<template>
	<view class="page_box">
		<view class="head_box x-c">
			<!-- 搜索 -->
			<view class="search-box x-f">
				<view class="x-f search-area px20" @tap="selectCity">
					{{ model.area_text || '选择区域' }}
					<text class="cuIcon-triangledownfill"></text>
				</view>
				<u-search
					style="flex: 1;"
					v-model="searchValue"
					focus
					:showAction="false"
					bgColor="f4f4f4"
					searchIcon=""
					@search="onSearch"
					@change="onSearch"
					@clear="clearSearch"
					placeholder="请输入你想查询的地址"
				></u-search>
			</view>
		</view>
		<view class="content_box">
			<view class="search-result-card x-bc " v-for="item in searchResultList" :key="item.id" @tap="useAddress(item)">
				<view class="mr10">
					<view class="card-title mb10">{{ item.name }}</view>
					<view class="card-address">{{ item.address }}</view>
				</view>
				<view class="card-dis"></view>
			</view>
		</view>
		<!-- 省市区 -->
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
	</view>
</template>

<script>
import { MAP_KEY } from '@/env.js';
export default {
	components: {},
	data() {
		return {
			searchValue: '',
			pickerShow: false,
			model: {
				area_text: '',
				area_id: ''
			},
			searchResultList: []
		};
	},
	computed: {},
	onLoad() {},
	onShow() {
		let locationInfo = uni.getStorageSync('locationInfo');
		if (locationInfo.lat) {
			this.model.area_text = locationInfo.area;
			this.model.area_id = locationInfo.cityCode;
			this.model.lat = locationInfo.lat;
			this.model.lng = locationInfo.lng;
		}
	},
	methods: {
		// 清除search
		clearSearch() {
			this.searchValue = '';
		},
		// 选择城市
		selectCity() {
			this.pickerShow = true;
		},
		// 选择地区回调
		regionConfirm(e) {
			this.model.area_text = e.area.label;
			this.model.area_id = e.area.value;
		},
		// 搜索
		async onSearch() {
			uni.showLoading();
			const [error, res] = await uni.request({
				url: `https://restapi.amap.com/v3/assistant/inputtips?&city=${this.model.area_id}&citylimit=true&location=${this.model.lng},${this.model.lat}&keywords=${
					this.searchValue
				}&key=${MAP_KEY}`
			});
			if (res.statusCode === 200) {
				uni.hideLoading();
				this.searchResultList = res.data.tips;
			}
		},
		useAddress(locationInfo) {
			let pages = getCurrentPages();

			// #ifdef MP-WEIXIN || APP-PLUS
			let currPage = pages[pages.length - 1].$vm;
			let prevPage = pages[pages.length - 2].$vm; //上一个页面
			// #endif

			// #ifdef H5
			let currPage = pages[pages.length - 1];
			let prevPage = pages[pages.length - 2]; //上一个页面
			// #endif
			let location = {
				lng: locationInfo.location.split(',')[0],
				lat: locationInfo.location.split(',')[1],
				locationText:locationInfo.name
			};
			prevPage.location = location;

			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
.head_box {
	height: 136rpx;
	background-color: #fff;
	padding: 0 20rpx;
	margin-bottom: 20rpx;
	.search-box {
		height: 80rpx;
		flex: 1;
		background: #f4f4f4;
		border-radius: 40rpx;
	}
}
// 搜索结果
.search-result-card {
	background-color: #fff;
	padding: 38rpx 30rpx;
	border-bottom: 2rpx solid #eeeeee;
	.card-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
	}
	.card-address {
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
	}
	.card-dis {
		font-size: 24rpx;
		font-weight: 400;
		color: #b1b3c7;
		white-space: nowrap;
	}
}
</style>
